import { Layout, Menu } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import React, { useState } from 'react';
import { history } from 'umi';

const { Sider, Content } = Layout;
const { SubMenu } = Menu;
const SiderMenu = (props: any) => {
  const { flag } = props;
  return (
    <Sider trigger={null} collapsible collapsed={flag}>
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        <Menu.Item
          key="1"
          icon={<UserOutlined />}
          onClick={() => {
            history.push('/');
          }}
        >
          首页
        </Menu.Item>
        <SubMenu key="user" icon={<VideoCameraOutlined />} title="用户管理">
          <Menu.Item
            key="user/add"
            onClick={() => {
              history.push('/user/add');
            }}
          >
            添加用户
          </Menu.Item>
          <Menu.Item
            key="/user/list"
            onClick={() => {
              history.push('/user/list');
            }}
          >
            用户列表
          </Menu.Item>
        </SubMenu>
        <Menu.Item
          key="3"
          icon={<UploadOutlined />}
          onClick={() => {
            history.push('/test');
          }}
        >
          test
        </Menu.Item>
        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
      </Menu>
    </Sider>
  );
};

export default SiderMenu;
